<template>
  <div class="scanning-box" id="mytables">
    <div class="flex-header">
        <my-header title="提车验证" />
    </div>
    <div class="content-box">
        <mu-text-field v-model="num" placeholder="车牌/道次" ref="num" class='input' @keyup.enter.native="getCarNumber(1)"><i class="iconfont icon-saomiao" @click="scan('num')"></i></mu-text-field>
        <mu-text-field v-model="carVin" placeholder="商品车VIN" ref="carvin" class='input' @keyup.enter.native="getCarVin(1)"><i class="iconfont icon-saomiao" @click="scan('vin')"></i></mu-text-field>
        <h3 class="mtit"><span>承运商：{{carryName}}</span> <span>车牌号：{{vehicle}}</span></h3>
        <h3 class="ctit">已验证数量：{{pickedNum}}/{{waitPickNum}}</h3>
        <mu-data-table stripe :loading="tableLoading" :columns="columns" :sort.sync="sort" @sort-change="handleSortChange" :data="list"  @row-click="rowTap">
            <template slot-scope="scope">
                <td>{{scope.row.vin}}</td>
                <td>{{scope.row.car}}</td>
                <td>
                    <mu-button fab small color="error" @click="DelRow(scope.row)">
                        <mu-icon value="delete"></mu-icon>
                    </mu-button>
                </td>
            </template>
        </mu-data-table>
        <mu-button color="primary" large @click="OutScan" class="mbtns">出场确认</mu-button>
    </div>
    <scanning v-if="isScanning" :mark="scanMark" v-on:childByValue="childByValue" v-on:closeing="closeing"/>
  </div>
</template>

<script>
import myHeader from "@/components/header"
import scanning from "@/components/scanning"
import api from "@/common/api"
export default {
  components: {
    myHeader, scanning
  },
  data () {
    return {
        tableLoading: false,
        columns: [
            { title: 'VIN', name: 'vin', width: 150},
            { title: '车型/颜色', name: 'car'},
            { title: '功能', name: 'zone'}
        ],
        list: [],
        sort: {
            name: '',
            order: 'asc'
        },
        scanMark: '',
        isScanning: false,
        num: "",
        isAction: true,
        pickedNum: 0,
        masterBOLId: 0,
        waitPickNum: 0,
        carryName: '承运商',
        vehicle: "车牌号",
        carVin: ""
    }
  },
  methods: {
    OutScan () {
        if(this.isAction){
            this.isAction = false;
            let data = Object.assign({}, this.$store.state.user, {
                content: {
                    masterBOLId: this.masterBOLId
                }
            });
            this.common.reqData(api.app('outScan'), data, res=>{
                console.log(res.data);
                if(res.data.status == 100){
                    // this.Refresh(res);
                    this.pickedNum =  0;
                    this.masterBOLId = 0;
                    this.waitPickNum = 0;
                    this.list = [];
                    this.carVin = "";
                    this.num = "";
                    this.Toast({
                        message: "已出场成功。"
                    });
                }else{
                    // 提示
                    this.Toast({
                        message: res.data.msg
                    });
                }
                this.isAction = true;
            },err =>{
                this.isAction = true;
            });
        }
    },
    Refresh (res) {
        this.pickedNum = res.data.content.pickedNum ? res.data.content.pickedNum : 0;
        this.masterBOLId = res.data.content.masterBOLId ? res.data.content.masterBOLId : 0;
        this.waitPickNum = res.data.content.waitPickNum ? res.data.content.waitPickNum : 0;
        this.list = res.data.content.bol ? res.data.content.bol : [];
        this.carryName = res.data.content.carryName ? res.data.content.carryName : '承运商';
        this.vehicle = res.data.content.vehicle ? res.data.content.vehicle : '车牌号';
    },
    DelRow (row) {
        if(this.isAction){
            this.tableLoading = true;
            this.isAction = false;
            let data = Object.assign({}, this.$store.state.user, {
                content: {
                    bolId: row.bolId
                }
            });
            this.common.reqData(api.app('cancelPickCar'), data, res=>{
                console.log(res.data);
                if(res.data.status == 100){
                    this.Refresh(res);
                    this.carVin = "";
                }else{
                    // 提示
                    this.Toast({
                        message: res.data.msg
                    });
                }
                this.tableLoading = false;
                this.isAction = true;
            },err =>{
                this.tableLoading = false;
                this.isAction = true;
            });
        }
    },
    rowTap (index, row, event) {
    //   this.$router.push({name:"inventoryList", params: {row: row}});
    },
    handleSortChange ({name, order}) {
      this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
    },
    closeing (val) {
        val ? this.isScanning = false : null;
    },
    childByValue (val) {
        if(val){
            if(val.split('&')[1] == 'num'){
                this.num = val.split('&')[0];
                this.getCarNumber();
            }else if(val.split('&')[1] == 'vin'){
                this.carVin = val.split('&')[0];
                this.getCarVin();
            }
        }
    },
    scan (txt) {
        this.scanMark = txt;
        this.isScanning = true;
    },
    getCarNumber () {
        if(this.isAction){
            this.tableLoading = true;
            this.isAction = false;
            let data = Object.assign({}, this.$store.state.user, {
                content: {
                    card: this.num
                }
            });
            this.common.reqData(api.app('getMasterBol'), data, res=>{
                console.log(res.data);
                if(res.data.status == 100){
                    this.Refresh(res);
                    this.$refs.carvin.$el.children[0].getElementsByTagName('input')[0].focus();
                }else{
                    // 提示
                    this.Toast({
                        message: res.data.msg
                    });
                }
                this.tableLoading = false;
                this.isAction = true;
            },err =>{
                this.tableLoading = false;
                this.isAction = true;
            });
        }
    },
    getCarVin () {
        console.log(this.masterBOLId)
        if(this.num == ""){
            this.Toast({
                message: "请先扫描车牌/道次"
            });
            return false;
        }
        if(this.isAction){
            this.tableLoading = true;
            this.isAction = false;
            let data = Object.assign({}, this.$store.state.user, {
                content: {
                    card: this.num,
                    vin: this.carVin,
                    masterBOLId: this.masterBOLId
                }
            });
            this.common.reqData(api.app('pickCar'), data, res=>{
                console.log(res.data);
                if(res.data.status == 100){
                    this.Refresh(res);
                    this.carVin = "";
                }else{
                    // 提示
                    this.Toast({
                        message: res.data.msg
                    });
                }
                this.tableLoading = false;
                this.isAction = true;
            },err =>{
                this.tableLoading = false;
                this.isAction = true;
            });
        }
    }
  },
  mounted () {
  },
  computed: {
  },
  watch:{
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.scanning-box{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.mu-input{
    width: 85%;
    margin: 20px auto 0;
    display: block;
}
.imgs{
    width: 50px;
    height: 50px;
    overflow: hidden;
    margin: 10px;
}
.imgs img{
    width: 100%;
}
.photos{
    border: 1px solid #ccc;
    width: 90%;
    margin: 20px auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
i.iconfont.icon-icon25201{
    display: block;
    font-size: 50px;
    margin: 10px;
}
.paper{
    width: 90%;
    margin: 20px auto 0;
    padding: 10px 0;
}
.paper div{
    padding: 10px 20px;
}
.submit{
    display: block;
    margin: 20px auto;
}
.abnormal-box {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
}
.abnormal-box .mu-input{
    width: 45%;
}
em{padding: 0 2em;}
.mu-carousel{
    height: 100%;
}
#ylbox{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#ylbox img{
    width: 100%;
    height: 100%;
}
header.mu-appbar{
    box-shadow: none;
    background: none;
    position: absolute;
    width: 100%;
}
.fl{
    display: flex;
}
.ctit{
    padding: 0.5rem 1rem;
}
.mu-fab-button.mu-button-small {
    width: 25px;
    height: 25px;
}
.mu-fab-button.mu-button-small .mu-icon{
    font-size: .2rem;
}
.mbtns{
    margin: 2rem auto 0;
    display: block;
}
.mtit{
    width: 85%;
    margin: 1rem auto ;
    display: flex;
    font-weight: normal;
    justify-content: space-between;
}
</style>
